<template>
  <div class="c-base-form">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        :key="index"
        :label="item"
        :prop="item"
        fit="true"
        header-row-class-name="headerClass"
        min-width="100"
        row-class-name="rowClass"
        v-for="(item,index) in tableFields"
      ></el-table-column>
    </el-table>
    <div class="c-base_pagination">
      <el-pagination
        :total="total"
        @current-change="changPage"
        background
        layout="prev, pager, next"
        v-if="tableData.length>0&&paging"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import componentRefresh from '@/mixins/componentRefresh'
let DATA = [
	{ 新增确诊: 10, 新增疑似: 3, 新增治愈: 15, 新增死亡: 0 },
	{ 新增确诊: 2, 新增疑似: 13, 新增治愈: 10, 新增死亡: 0 },
	{ 新增确诊: 12, 新增疑似: 1, 新增治愈: 6, 新增死亡: 1 },
	{ 新增确诊: 5, 新增疑似: 15, 新增治愈: 16, 新增死亡: 0 },
]
export default {
	name: 'CBaseForm',
	data() {
		return {
			tableData: [],
			tableFields: [],
		}
	},
	mixins: [componentRefresh],
	props: {
		props: {
			type: Array,
			default: function () {
				return [
					{
						fields: [],
					},
				]
			},
		},
		uuid: String,
	},
	computed: {
		dataTrigger() {
			if (this.props[1].fields[0].value.dataJson.json) {
				let result = this.props[1].fields[0].value.dataJson.json
				return JSON.parse(result)
			} else {
				return DATA
			}
		},
		total() {
			if (this.props[1].fields[0].value.dataJson.data.paging.total) {
				return this.props[1].fields[0].value.dataJson.data.paging.total
			} else {
				return DATA.length
			}
		},
		paging() {
			return (
				this.total > this.props[1].fields[0].value.dataJson.data.paging.pageSize
			)
		},
	},
	watch: {
		dataTrigger() {
			this.initData()
		},
		paging(val) {
			if (val) {
				this.props[1].fields[0].value.dataJson.data.paging.pageIndex = 1
			}
		},
	},
	created() {
		this.initData()
	},
	methods: {
		changPage(pageIndex) {
			this.props[1].fields[0].value.dataJson.data.paging.pageIndex = pageIndex
		},
		initData() {
			let header = this.getHeader(this.dataTrigger)
			this.tableData = this.formatDate(this.dataTrigger)
			this.tableFields = header
		},
		getHeader(data) {
			if (Array.isArray(data) && data.length > 0) {
				return Object.keys(data[0])
			} else {
				return []
			}
		},
		formatDate(data) {
			data.forEach(element => {
				let keys = Object.keys(element)
				keys.forEach(k => {
					let value = element[k]
					if (/^([0-9]{4})-([0-1][0-9])-([0-3][0-9]).+/.test(value)) {
						element[k] = moment(value).format('YYYY-MM-DD')
					}
				})
			})
			return data
		},
	},
}
</script>

<style lang="stylus" scoped>
.c-base_pagination {
	display: flex;
	height: 50px;
	justify-content: flex-end;
	align-items: center;
}
</style>